<template>
    <view class="out">
		<checkbox-group @change="itemChange">
			<view class="item" v-for="item in goods" :key="item.id">
				<checkbox :checked="item.check" :value="item.id"></checkbox>
				<text class="title">{{ item.name }}</text>
				<text class="price">{{ item.price }}</text>
				<text class="del" @click="remove(item)">删除</text>
			</view>
		</checkbox-group>
        
		<view>
			选中了{{totalNumber}}款，总共{{totalPrice}}元。
		</view>
		<view>
			{{selectGroup}}
		</view>
		<view>
			{{goods}}
		</view>
    </view>
</template>

<script setup>
import { computed, ref } from 'vue';

    const goods = ref([
		{id:"1", name:'小米', price:1599.00, check:false},
		{id:"2", name:'华为', price:6699.00, check:false},
		{id:"3", name:'OPPO', price:2399.00, check:false},
		{id:"4", name:'APPLE', price:4599.00, check:false}
	])
	const selectGroup = ref([])
	const totalNumber = computed(()=> selectGroup.value.length)
	const totalPrice = computed(()=> {
		return goods.value.filter(item=>item.check).reduce((prev, curr)=>prev+curr.price,0)
	})
	
	function remove(item) {
		console.log(item)
	} 
	
	function itemChange(e) {
		console.log(e)
		selectGroup.value = e.detail.value
		goods.value.forEach(item => {
			item.check = selectGroup.value.includes(item.id);
			// item.check = true;
			console.log(item)
		})
	}
</script>

<style lang="scss" scoped>
	.out {
		background: khaki;
		padding: 20px;
		.item {
			background: indianred;
			padding: 30px, 10px;
			.title {
				margin-left: 5px;
				background: #eeeeee;
			}
			.price {
				margin-left: 10px;
			}
			.del {
				background: wheat;
				color: #ff0000;
				margin-left: 15px;
			}
		}
	}
</style>
